<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 class="show"></h1>
    <button class="btn1">按钮1</button>
    <button class="btn2">按钮2</button>
    <script>
        // 创建一个Worker对象，在浏览器后台开辟一个Worker线程
        let worker = new Worker('./worker.js');

        let btn1 = document.querySelector('.btn1');
        let btn2 = document.querySelector('.btn2');
        let show = document.querySelector('.show');

        btn1.onclick = function(){

            // 给worker线程发送消息 用postMessage这个方法
            console.log('给Worker线程发送消息');
            worker.postMessage('hello world');
        }

        // 接收Worker线程发送的消息
       worker.onmessage = function(e){ //worker线程发送来的消息需要被事件对象所接收
            console.log('收到Worker线程发送的消息');

            show.innerText = e.data;

            //关闭worker线程
            worker.terminate();
            
       }

       btn2.onclick=function(){
        console.log('执行其他函数');
       }

    //worker postMessage onmessage terminate 三个方法
    // postMassage 给worker线程发送消息
    // onmessage 接收worker线程发来的消息
    // terminate 关闭线程

       //

    </script>
</body>
</html>